<template>
    <a-row :gutter="30">
        <a-col :xs="24" :md="24">
            <a-card title="交易统计" border="true">
                <div id="id_echar" style="height: 395px"></div>
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                myChart: null,
                statData: [
                    {
                        amount: 9800,
                        count: 7700,
                    },
                    {
                        amount: 9500,
                        count: 6700,
                    },
                    {
                        amount: 1200,
                        count: 570,
                    },
                ],
            }
        },
        methods: {
            initChart() {
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById('id_echar'))

                // 指定图表的配置项和数据
                let option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        dimensions: ['product', '交易总额', '交易人次'],
                        source: [
                            {
                                product: '前日',
                                交易总额: this.statData[0].amount,
                                交易人次: this.statData[0].count,
                            },
                            {
                                product: '昨日',
                                交易总额: this.statData[1].amount,
                                交易人次: this.statData[1].count,
                            },
                            {
                                product: '今日',
                                交易总额: this.statData[2].amount,
                                交易人次: this.statData[2].count,
                            },
                        ],
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [{ type: 'bar' }, { type: 'bar' }],
                    animationDuration: 3000,
                }
                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option)
            },
        },
        mounted() {
            console.log('mounted initChart')
            this.initChart()
            // this.$nextTick(() => {
            //     //  执行echarts方法
            //     console.log('mounted nextTick drawChart')
            //     //this.statData[0].count++
            //     this.initChart()
            // })
            //this.drawChart()
        },
        created() {
            //this.drawChart()
            console.log('created')
        },
        updated() {
            console.log('updated')
        },
        beforeUnmount() {
            console.log('beforeUnmount')
            if (!this.myChart) {
                return
            }
            // window.removeEventListener('resize', this.__resizeHandler)
            this.myChart.dispose()
            this.myChart = null
        },
    }
</script>
